{% extends "base.html" %}
{% from "macros/macro_pagination.html" import render_pagination %}

{% block title %}
    系统设置
{% endblock %}

{% block page_title %}
    管理员列表
{% endblock %}

{% block header_actions %}
    <div class="page-actions">
        <a href="{{ url_for('system_admin.create') }}" class="btn btn-primary">
            <i class="fa fa-plus"></i> 新建
        </a>
    </div>
{% endblock %}

{% block body %}
    <input type="hidden" id="csrf_token" value="{{ csrf_token() }}">
    <!-- 数据列表 -->
    <div class="data-table-container">
        <table class="data-table">
            <thead>
            <tr>
                <th>ID</th>
                <th>用户名</th>
                <th>姓名</th>
                <th>角色</th>
                <th>状态</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {% for item in pagination.items %}
                <tr>
                    <td>{{ item.get('id') }}</td>
                    <td>{{ item.get('username') }}</td>
                    <td>{{ item.get('real_name') }}</td>
                    <td>{{ item.get('role_name') }}</td>
                    <td id="user-{{ item.get('id') }}-status">{{ item.get('status_name') }}</td>
                    <td>{{ item.get('create_time') }}</td>
                    <td class="action-buttons">

                        <button class="action-btn edit-btn"
                                onclick="window.location.href='{{ url_for('system_admin.edit',id=item.get('id')) }}'">
                            编辑
                        </button>
                        {% if item.get('status') == "normal" %}
                            <button class="action-btn delete-btn" onclick="editDisable({{ item.get('id') }})">
                                禁用
                            </button>
                        {% else %}
                            <button class="action-btn view-btn" onclick="editEnable({{ item.get('id') }})">
                                启用
                            </button>
                        {% endif %}
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    <!-- 分页控件 -->
    {{ render_pagination(pagination, 'system_admin.page', form=form) }}

    <script>
        function editDisable(id) {
            var title_text = "禁用";
            var content_text = "禁用后用户将无法登录系统";
            confirmEditUserStatus(id, title_text, content_text)
        }

        function editEnable(id) {
            var title_text = "启用";
            var content_text = "启用后用户将可以登录系统";
            confirmEditUserStatus(id, title_text, content_text)
        }

        function confirmEditUserStatus(id, title_text, content_text) {
            Swal.fire({
                title: `确认${title_text}？`,
                text: content_text,
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: `确认${title_text}`,
                cancelButtonText: '取消'
            }).then((result) => {
                if (result.isConfirmed) {
                    axios.put('{{ url_for('system_admin.update_status') }}',
                        {
                            id: id
                        },
                        {
                            headers: {
                                'X-CSRFToken': document.getElementById('csrf_token').value,
                                'Content-Type': 'application/json'
                            }
                        }).then(response => {
                        Swal.fire({text: response.data.msg}).then((r) => {
                            if (response.data.status == "success") {
                                window.location.href = '{{ url_for('system_admin.page', page=pagination.page, form=form) }}'
                            }
                        });
                    }).catch(error => {
                        console.error('更新失败:', error);
                    });
                }
            });
        }
    </script>
{% endblock %}